<template>
    <!-- <v-breadcrumbs :items="items" divider=">"></v-breadcrumbs> -->
    <div class="r-page d-flex flex-column align-center">
        <div class="r-head">
            <div class="r-title c-title-1">
                <img class="r-img" :src="BankIcon" />
                <!-- 榜單 -->
                {{ $t('message.Ranks.a') }}
            </div>
            <!-- <div class="r-desc c-title-3">发掘最热、最新币种，及时捕捉市场机会。</div> -->
            <div class="r-desc c-title-3">{{ $t('message.Ranks.b') }}</div>
            <div class="r-list justify-center user-none">
                <div class="r-item c-title-4" v-for="item in navs" :key="item.key" :class="{ cur: cur == item.key }"
                    @click="onChange(item.key)">
                    {{ item.title }}
                </div>
            </div>
            <div class="r-tip c-title-3">{{ desc }}</div>
            <div class="rig">
                <JButtons v-show="cur == 'VOLATILITY'" :list="volatility.title_nvas.value" v-model="volatility.nvas_.value"></JButtons>
            </div>
            
        </div>
        <router-view class="rview" style="margin: 0 auto;" :key="12"></router-view>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, computed, watch, toRaw } from "vue";
import { useRouter } from "vue-router";
import { volatility, Nva } from './script/comm';
import JButtons from "@/components/j-buttons/index.vue";
import BankIcon from "@/assets/bank.png";
import i18n from "@/locals";
import { useKline } from "@/stores/kline";
import { useRank } from "@/stores/rank";
import { Bus, KLINE_RANK_WAVE } from "@/connetion/Bus";
import { Conn } from "@/connetion/Conn";
import { onUnmounted } from "vue";
const router = useRouter();
const cur = ref("");
const kline = useKline();
const rank = useRank();

watch(volatility.nvas_, NvasStoggle);

onMounted(() => {
    cur.value = localStorage.getItem("ranks") || "";
    // console.error("rank type", cur.value,volatility)
    // console.log("rank type", cur.value,volatility)
    if(cur.value == "VOLATILITY"){
        NvasStoggle(volatility.nvas_.value);
    }
    else{
        setTimeout(() => {
            Conn.ins.rankSubscribe(true, cur.value);
        }, 1200);
        Conn.ins.rankSubscribe(true, cur.value);
    }
    

    // NvasStoggle(volatility.nvas_.value);
});

onUnmounted(()=>{
    // console.error("remove rank")
    Conn.ins.rankSubscribe(false, cur.value);
})
function NvasStoggle(val: Nva) {
    const item = toRaw(val);
    // console.log('yzt初始化and变化', item);
    // rank.updateWave(item.value);
    Bus.emit(KLINE_RANK_WAVE, item.value);
    Conn.ins.rankSubscribe(true, cur.value);
}

const onChange = (str: string) => {
    cur.value = str;
    localStorage.setItem("ranks", str);
    router.push("/ranks/" + str.toLowerCase());
};

const desc = computed(() => {
    let item = navs.find(i => i.key == cur.value);
    if (item) {
        return item.desc;
    }
    return "";
});

// const navs = reactive([
//     {
//         key: "HOT",
//         title: "热门榜",
//         desc: "24小时内交易人数最多的币种排名"
//     },
//     {
//         key: "UP",
//         title: "涨幅榜",
//         desc: "24H涨幅最大的币种排名"
//     },
//     {
//         key: "DOWN",
//         title: "跌幅榜",
//         desc: "24H跌幅最大的币种排名"
//     },
//     {
//         key: "NEW",
//         title: "新币榜",
//         desc: "发掘最新币种，及时捕捉市场机会"
//     },
//     {
//         key: "VOLATILITY",
//         title: "波动率榜",
//         desc: "24小时内波动率最大的币种排名"
//     },
//     {
//         key: "TURNOVER",
//         title: "成交额榜",
//         desc: "24小时内成交额最大的币种排名"
//     }
// ]);

const navs = reactive([
    {
        key: "HOT",
        title: i18n.global.t('message.Ranks.table.a.a'),
        desc: i18n.global.t('message.Ranks.table.a.b')
    },
    {
        key: "UP",
        title: i18n.global.t('message.Ranks.table.b.a'),
        desc: i18n.global.t('message.Ranks.table.b.b')
    },
    {
        key: "DOWN",
        title: i18n.global.t('message.Ranks.table.c.a'),
        desc: i18n.global.t('message.Ranks.table.c.b')
    },
    // {
    //     key: "NEW",
    //     title: i18n.global.t('message.Ranks.table.d.a'),
    //     desc:  i18n.global.t('message.Ranks.table.d.b')
    // },
    {
        key: "VOLATILITY",
        title: i18n.global.t('message.Ranks.table.e.a'),
        desc: i18n.global.t('message.Ranks.table.e.b')
    },
    {
        key: "TURNOVER",
        title: i18n.global.t('message.Ranks.table.f.a'),
        desc: i18n.global.t('message.Ranks.table.f.b')
    }
]);

const items = ref([
    {
        // title: "主頁",
        title: i18n.global.t('message.Global.Home'),
        disabled: false,
        href: "/"
    },
    {
        // title: "榜單",
        title: i18n.global.t('message.Global.child.e'),
        disabled: true,
        href: ""
    }
]);
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
